<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
	<script type="text/javascript" src="scripts/scriptaculous/lib/prototype.js"></script>
	<script type="text/javascript" src="scripts/scriptaculous/src/effects.js"></script>
<script type="text/javascript">

function slideshowMan(listeDivs)
{
	if (listeDivs.length == 0) return;
	
	var dom =
	{
		image : document.getElementById("monimage"),
		legende : document.getElementById("monimage")
	};
	
	var indexCourant = 0;
	var timerId = null;
	var self = this;
	
	function afficherImage(index)
	{
		new Effect.Fade('cadreimage' ,{
			duration:1,
			afterFinish: function(){
				new Effect.Appear('cadreimage',{duration:1});
				dom.image.src = listeDivs[index].image;
				legende.innerHTML = listeDivs[index].legende;
			}
		})
	}
	
	afficherImage(0);
	
	this.run = function ()
	{
		this.stop();
		
		function boucle()
		{
			afficherImage(indexCourant);
			if (indexCourant < listeDivs.length - 1)
			{
				timerId = window.setTimeout(boucle, listeDivs[indexCourant].temps);
				indexCourant += 1;
			}
			else
			{
				self.stop();
			}
		}
		
		boucle();
	}

	this.stop = function ()
	{
		window.clearTimeout(timerId);
		indexCourant = 0;
	}
}

var slideshow = null;

window.onload = function ()
{
	slideshow = new slideshowMan(
		[
			{
				image : "pictures/1.jpg",
				legende : "Gallerie bleue",
				temps : 8000
			},
			{
				image : "pictures/2.jpg",
				legende : "Tunnel",
				temps : 8000
			}
			,
			{
				image : "pictures/1.jpg",
				legende : "encore la Gallerie bleue",
				temps : 8000
			}
			,
			{
				image : "pictures/2.jpg",
				legende : "encore le tunnel",
				temps : 8000
			}
		]);
}

</script>
</head>
<body>

	<div id="cadreimage">
		<img id="monimage" class="loadimage" />
		<div id="legende" class="caption"></div>
	</div>
	
	<div style="position:absolute; left:10px; top:10px; z-index:-100;">
		<object type="application/x-shockwave-flash" 
			data="player/dewplayer-mini.swf?mp3=music/test.mp3&amp;autostart=1&amp;nopointer=1" 
			width="80" height="20">
			<param name="wmode" value="transparent" />
			<param name="movie" value="player/dewplayer-mini.swf?mp3=music/test.mp3&amp;autostart=1&amp;nopointer=1" />
		</object>
	</div>
	<div style="position:absolute; left:10px; top:10px; z-index:-10; background-color:white; width:100px; height:100px;">
	&nbsp;
	</div>
	
	<div>
		<a href="javascript://" onclick="if (slideshow) slideshow.run(); return false;"><img src="icons/media-playback-start.png"/></a>
		<a href="javascript://" onclick="if (slideshow) slideshow.stop(); return false;"><img src="icons/media-playback-stop.png"/></a>
	</div>
	
</body>
</html>
